八、使用JavaScript操作cookie

8.1 什么是cookie

​ Cookie，有时也用其复数形式Cookies，指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。

​ Cookie 是在 HTTP 协议下，服务器或脚本可以维护客户工作站上信息的一种方式。Cookie 是由 Web 服务器保存在用户浏览器（客户端）上的小文本文件，它可以包含有关用户的信息。无论何时用户链接到服务器，Web 站点都可以访问 Cookie 信息。

​ cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。而且不同的浏览器之间cookie不能共享。

==cookie的本质就是用键值对存储在用户本地的一些数据，这些数据不同的网站，不同的浏览器是不能共享的==

8.2 cookie的用处

​ cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。

  1. 保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。

  2. 跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便。

  3. 定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

  4. 创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。

8.3 cookie的缺陷

  1. cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；

  2. cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；

  3. cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；

  4. cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

8.4 cookie的构成

cookie 由浏览器保存的以下几块信息构成。

  1. 名称：一个唯一确定 cookie 的名称。cookie 名称是不区分大小写的，所以 myCookie 和 MyCookie被认为是同一个 cookie。然而，实践中最好将 cookie 名称看作是区分大小写的，因为某些服务器会这样处理 cookie。cookie 的名称必须是经过 URL 编码的。

  2. 值：储存在 cookie 中的字符串值。值必须被 URL 编码。

  3. 域：cookie 对于哪个域是有效的。所有向该域发送的请求中都会包含这个 cookie 信息。这个值可以包含子域（subdomain，如www.wrox.com），也可以不包含它（如. wrox.com ，则对于wrox.com的所有子域都有效）。如果没有明确设定，那么这个域会被认作来自设置 cookie 的那个域。

  4. 路径：对于指定域中的那个路径，应该向服务器发送 cookie。例如，你可以指定 cookie 只有从http://www.wrox.com/books/中才能访问，那么http://www.wrox.com的页面就不会发送 cookie 信息，即使请求都是来自同一个域的。

  5. 失效时间：表示 cookie 何时应该被删除的时间戳（也就是，何时应该停止向服务器发送这个cookie）。默认情况下，浏览器会话结束时即将所有 cookie 删除；不过也可以自己设置删除时间。这个值是个 GMT 格式的日期（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定应该删除cookie 的准确时间。因此，cookie 可在浏览器关闭后依然保存在用户的机器上。如果你设置的失效日期是个以前的时间，则 cookie 会被立刻删除。

  6. 安全标志：指定后，cookie 只有在使用 SSL 连接的时候才发送到服务器。例如，cookie 信息只能发送给https://www.wrox.com，而http://www.wrox.com的请求则不能发送 cookie。

8.5 存储cookie

有2种途径去存储cookie.

服务器端通过http响应头Set-Cookie来通知浏览器存储cookie。例如：(这个暂时不研究，仅了解)。浏览器收到这个头响应头之后会自动存储这个cookie

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com
Other-header: other-header-value

客户端(浏览器端)通过JavaScript去存储cookie(重点研究)。Javascript操作cookie需要通过document的cookie属性来完成。

//存储cookie，并设置超时时间。  domaim和secure使用默认的情况
<script type="text/javascript">
    /*
        在存储cookie的时候，name和value是必须的
        参数1：cookie的name
        参数2：cookie的值
        参数3：存储时间 单位天

        只要name不同，就可以存储多个cookie
    */
    function saveCookie(name, value, expiredays){

        var date = new Date();
        alert(date.getDate())
        date.setDate(date.getDate() + expiredays);
        alert(date.toGMTString())
        //cookie的内容其实就是一串纯文本。 对字符最好进行url编码，否则如果有中文就会出现问题。
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value) + "; expires=" + date.toGMTString();
        document.cookie = cookieText;
    }
    saveCookie("name", "张三", 1);
</script>

8.6 读取cookie

读取cookie仍然是通过document的cookie属性，不过字符串需要我们自己解析。

只能说，JavaScript的这个API设计的真烂

<script type="text/javascript">
    function getCookie (name) {
        //先拿到cookie字符串
        var cookieText = document.cookie;
        //获取要查找的 cookie的 name所在的下标
        var index = cookieText.indexOf(name + "=");  // name=李四; ...
        //如果下标不为-1，证明找到了
        if(index != -1){
            var endIndex = cookieText.indexOf(";", index);    //查找指定的cookie的结束为止
            // 如果等于-1，证明没有找到;号，则把末尾设置为字符串的末尾
            endIndex = (endIndex == -1 ? cookieText.length : endIndex);
            //把想要的cookie的value截取出来
            var value = cookieText.substring(index + (name + "=").length, endIndex);
            //因为存储的时候使用了url编码，所以查到的东西需要url解码
            return decodeURIComponent(value);
        }
    }
    var value = getCookie("name");
    if(value){
        alert("欢迎你：" + value);
    }

</script>

8.7 删除cookie

删除cookie的原理非常简单，只要把超时时间设置为0，就会立即删除了。

function saveCookie(name, value, expiredays){

        var date = new Date();
        alert(date.getDate())
        date.setDate(date.getDate() + expiredays);
        alert(date.toGMTString())
        //cookie的内容其实就是一串纯文本。 对字符最好进行url编码，否则如果有中文会出现问题。
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value) + "; expires=" + date.toGMTString();
        document.cookie = cookieText;
}
    saveCookie("name", "", 0);

results matching ""

    No results matching ""